<template>
	<view class="l_pages" :style="skin">
		<jnavbar title="分销团队"></jnavbar>
		<view class="page_container">
			<view class="uni-block-bar uni-view uni-flex-row uni-underline">
				<view :class="[tabIndex == 1 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="1" @click="tapTab"><text>进行中</text></view>
				<view :class="[tabIndex == 3 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="3" @click="tapTab"><text>已结束</text></view>
			</view>
			<scroll-view scroll-y class="scroll_div" @scrolltolower="getlist">
				<u-gap height="20"></u-gap>
				<view class="uni-block-list">
					<view class="empty_div" v-if="hasShow == 'none'"><u-empty text="暂无活动" mode="list"></u-empty></view>
					<view class="list " v-else-if="hasShow == 'list'">
						<view class="item uni-flex-column" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
							<view class="img-box"><vimage :src="item.thumb"></vimage></view>
							<view class="u-p-20">
								<text>{{ item.name }}</text>
							</view>
							<view class="badge" v-bind:class="item.status == 1 ? 'success' : 'err'">
								<text>{{ item.status == 1 ? '正在进行' : '已结束' }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
	</view>
</template>

<script>
import http from '@/common/http.js';
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			tabIndex: 1,
			hasShow: 'list',
			page: 1,
			size: 10,
			list: [],
			sum: 0,
			time: 0
		};
	},
	computed: {
		skin() {
			return this.$store.state.skin;
		}
	},
	async onLoad(params) {
		await this.$getWx;
		if (params.tab) {
			this.tabIndex = params.tab;
		}
		this.getagentList(this.tabIndex);
	},
	onShow() {},
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.getagentList(this.tabIndex);
	},

	methods: {
		getlist() {
			this.getagentList(this.tabIndex);
		},
		logincallback(e) {
			if (e.islogin) {
				this.getagentList(this.tabIndex);
			}
		},
		tapTab(e) {
			this.tabIndex = e.currentTarget.dataset.id;
			this.page = 1;
			this.list = [];
			this.getagentList(this.tabIndex);
		},
		getagentList(status) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			const _this = this;

			http('/agent/ActivityList?page=' + this.page + '&size=10&status=' + status, {}, 'GET').then(
				res => {
					const json = res.data.msg;
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (json.length > 0) {
						_this.hasShow = 'list';
						_this.list = _this.list.concat(json);
						_this.page++;
					} else {
						if (this.page == 1) {
							_this.hasShow = 'none';
						} else {
							uni.showToast({
								title: '没有更多数据了',
								icon: 'none'
							});
						}
					}
				},
				e => {
					uni.showModal({
						title: '提示',
						content: e,
						showCancel: false
					});
					uni.hideLoading();
				}
			);
		},
		goDetail(item) {
		
			this.Jumpurl({
				link: 'activity?id=' + item.id,
				type: 1,
				login_type: 1
			});
		}
	}
};
</script>

<style lang="scss">
.page_container {
	position: relative;
	.scroll_div {
		height: calc(100% - 80rpx);
	}
}
.uni-block-bar {
	justify-content: space-between;
	height: 80rpx;
	z-index: 100;
	width: 750rpx;
	.item {
		line-height: 78rpx;
		flex: 1;
		color: #696969;

		text {
			display: inline-block;
		}
	}

	.active {
		color: var(--main-color);
		border-bottom: 2rpx solid var(--main-color);
	}
}

.uni-block-list {
	.list {
		.item {
			position: relative;
			width: 710rpx;
			margin-left: 20rpx;
			// padding: 20rpx 20rpx;
			border-radius: 12rpx;
			background: #fff;
			overflow: hidden;
			.img-box {
				width: 100%;
				height: 300rpx;
			}
			.badge {
				position: absolute;
				right: 0;
				top: 0;
				color: #fff;
				padding: 5rpx 10rpx;
				font-size: 24rpx;
				border-radius: 0 12rpx 0 12rpx;
				&.success {
					background: #19be6b;
				}
				&.err {
					background: #fa3534;
				}
			}
		}
	}
}
</style>
